<template>
    <el-menu :collapse="getData.collapse" unique-opened router active-text-color="#ffd04b" background-color="#304156"
        class="el-menu-vertical-demo" :default-active="$route.path" text-color="#fff">
        <el-menu-item v-for="(item1) in menus.slice(0, 1)" :key="item1.name" :index="'/index/' + item1.path">
            <el-icon>
                <component :is="item1.meta.icon"></component>
            </el-icon>
            <template #title>
                <span>
                    {{ t(item1.meta.title) }}
                </span>
            </template>
        </el-menu-item>
        <el-sub-menu v-for="(item) in menus.slice(1)" :key="item.name" :index="item.path">
            <template #title>
                <el-icon>
                    <component :is="item.meta.icon"></component>
                </el-icon>
                <span>{{ t(item.meta.title) }}</span>
            </template>
            <el-menu-item-group>
                <div v-for="items in item.children" :key="items.name">
                    <el-menu-item v-if="!items.meta.hidden" :index="'/index/' + item.path + '/' + items.path">
                        <span>{{ t(items.meta.title) }}</span>
                    </el-menu-item>
                </div>
            </el-menu-item-group>
        </el-sub-menu>
    </el-menu>
</template>


<script lang="ts" setup>
import menus from '@/router/page'


import { useI18n } from 'vue-i18n'
const { t } = useI18n()

// const router = useRouter()

// 通过defineProps接收父组件的值
const getData = defineProps({
    // 接收传值   此处的father就是父组件的自定义名称 
    collapse: {
        type: Boolean,  // 数据类型
        default: false // 未传值时的默认值
    }
})

</script>


<style lang="less" scoped>
.el-menu {
    border: none;

    &:not(.el-menu--collapse) {
        width: 200px;
    }
}
</style>